<!--
 * @Author: 花香蝶自来 1026583651@qq.com
 * @Date: 2024-07-12 09:59:38
 * @LastEditors: 花香蝶自来 1026583651@qq.com
 * @LastEditTime: 2024-07-14 21:26:29
 * @FilePath: /driver/pagesall/order/order.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<view class="content">
		<u-navbar :autoBack="false" title="运单管理">
			<template #left>
				<view class=""> </view>
			</template>
		</u-navbar>
		<view class="tabs">
			<view style="flex: 1">
				<u-tabs ref="tabs" :list="list1" :scrollable="false" @change="tabschange"></u-tabs>
			</view>
		</view>
		<swiper class="swiper" :current="current" circular @change="swiperchange">
			<swiper-item v-for="(item, key) in list1" :key="key">
				<orderitem :ref="`swiperitem${key}`" :querydata="item.query" :iscurrent="current == key ? true : false">
				</orderitem>
			</swiper-item>
		</swiper>

		<tabbar></tabbar>
	</view>
</template>

<script>
	import orderitem from "./components/orderitem.vue";
	export default {
		components: {
			orderitem,
		},
		data() {
			return {
				current: "0",
				list1: [{
						name: "全部",
						query: {},
					},
					{
						name: "待装车",
						query: {
							logisticsOrderState: "ROUTE_PLANNING_COMPLETE",
						},
					},
					{
						name: "运送中",
						query: {
							logisticsOrderState: "LOGISTICS_ORDER_SHIPMENT",
						},
					},
					{
						name: "已完成",
						query: {
							logisticsOrderState: "LOGISTICS_ORDER_RECEIPT",
						},
					},
				],
			};
		},
		onLoad(query) {
			if (query.current) {
				this.current = query.current;
			}
		},
		onShow() {
			this.$refs[`swiperitem${this.current}`] & this.$refs[`swiperitem${this.current}`][0].init()
		},
		watch: {
			current: {
				handler() {
					this.$refs[`swiperitem${this.current}`][0].init()
				},
				// immediate: true
			}
		},
		mounted() {
			if (this.current != "0") {
				this.$refs.tabs.clickHandler({}, this.current);
			} else {
				this.$refs[`swiperitem${this.current}`][0].init()
				// console.log(this.$refs[`swiperitem${this.current}`]);
			}
		},
		methods: {
			swiperchange(current) {
				this.$refs.tabs.clickHandler({}, current.detail.current);
			},
			tabschange(current) {
				this.current = current.index;
				// let cdlist = this.$refs[`cdlist${current.index}`]
				// if (cdlist.status == "loadmore" && cdlist.list.length == 0) {
				// 	cdlist.onRefresh()
				// }
			},
		},
	};
</script>

<style lang="scss">
	.content {
		height: 100vh;
		display: flex;
		flex-direction: column;

		.tabs {
			background: #fff;
		}

		.swiper {
			flex: 1;
			height: 0;
		}
	}
</style>